<template>
	<view class="nav_outer">
		<!-- <view class="tabsStyle"
			><u-tabs
				item-width="100%"
				active-color="#5690FB"
				:list="tabList"
				:current="current"
				:bar-style="barStyle"
				:bar-width="100"
				:is-scroll="false"
				@change="tabChange"
			></u-tabs> -->
		<!-- <view class="title_box">
				<view class="title_box_content"
					><view>张三</view>
					<view>【就诊卡号：00466644824】</view>
					<view @click="selectCard"
						>切换就诊卡<u-icon name="arrow-right"></u-icon></view
				>
				</view>
			</view> -->
		<!-- </view> -->
		<!-- <view style="padding-top: 86rpx; margin-bottom: 5rpx"></view> -->

		<view>
			<view class="backtop" v-if="backtop" @click="returnTop"> ↑ </view>
			<!-- 待缴费 -->
			<!-- <view v-if="current == 0"> -->
			<!-- 返回顶部 -->
			<!-- <view class="bottom_comtent" v-if="payShow">
					<view
						v-for="(item, index) in UnpaidFee"
						:key="index"
						style="padding: 80rpx 0"
						>{{ item.name }}
					</view>
				</view>
				<view v-else style="margin-top: 50%"
					><u-divider>暂无未缴费单的订单</u-divider>
				</view> -->
			<!-- </view> -->
			<!-- 菜单 -->
			<!-- <view v-if="current == 1"> -->
			<u-input
				:border="border"
				placeholder="请选择类型"
				v-model="typeMenu"
				type="select"
				@click="typeMenuShow = true"
			></u-input>
			<view>
				<view class="selectContent">
					<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
						<view class="checkBoxStyle">
							<u-checkbox
								@change="checkboxChange"
								v-for="(item, index) in listMenu"
								:key="index"
								v-model="item.checked"
								:name="item.id"
							>
								<view>
									<view class="introduce" style="padding-left: 60rpx">
										<view
											><text
												style="
													text-align: center;
													margin-right: 10rpx;
													background: #5690fb;
													display: inline-block;
													width: 20px;
													height: 20px;
													color: #fff;
													line-height: 20px;
												"
												>查</text
											>{{ item.clinicItemDict.itemName }}</view
										>
										<view
											style="margin-top: 10rpx; margin-top: 5px; color: orange"
											><text>￥</text>{{ item.clinicItemDict.price }}</view
										>
									</view>
								</view></u-checkbox
							>
						</view>
					</u-checkbox-group>

					<view style="padding-bottom: 80px; margin-top: 10px"
						><u-divider>暂无更多数据</u-divider>
					</view>
					<view class="submitMenu">
						<view style="width: 100%; display: flex; padding: 0 20px">
							<view style="flex: 1">
								<view style="font-weight: bold; color: orange"
									>￥{{ priceNum }}</view
								>
								<view style="color: #909090">预约介绍...</view>
							</view>
							<view style="flex: 1">
								<!-- :disabled="disabled"  -->
								<u-button type="primary" :disabled="disabled" @click="submit"
									>下一步</u-button
								>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- :value-name="id" :label-name="name" -->
			<u-select
				mode="single-column"
				:list="typeMenuList"
				v-model="typeMenuShow"
				value-name="id"
				label-name="name"
				@confirm="typeMenuConfirm"
			></u-select>
		</view>
		<!-- 检查-->
		<!-- <view v-if="current == 2">
				<view v-if="examineShow">
					<view>{{ examine }}</view>
				</view>
				<view v-else>
					<u-empty
						text="暂无数据"
						icon-size="200"
						icon-color="#0089ff8c"
						color="#c0c4cc"
						mode="history"
						margin-top="330"
					></u-empty>
				</view>
			</view> -->
		<!-- 完成 -->
		<!-- <view v-if="current == 3">
				<view v-if="accomplishShow">
					<view>{{ accomplish }}</view>
				</view>
				<view v-else>
					<u-empty
						text="暂无数据"
						icon-size="200"
						icon-color="#0089ff8c"
						color="#c0c4cc"
						mode="history"
						margin-top="330"
					></u-empty>
				</view>
			</view> -->
		<!-- 全部 -->
		<!-- <view v-if="current == 4">
				<view v-if="allShow">
					<view>{{ all }}</view>
				</view>
				<view v-else>
					<u-empty
						text="暂无数据"
						icon-size="200"
						icon-color="#0089ff8c"
						color="#c0c4cc"
						mode="history"
						margin-top="330"
					></u-empty>
				</view>
			</view> -->
		<!-- </view> -->
		<view class="safe"></view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {
	getHisClinicDict,
	confirmAppointPrescribe,
	getExamTypeList,
} from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			// a: [
			// 	{
			// 		id: '1',
			// 		price: '10',
			// 	},
			// 	{
			// 		id: '2',
			// 		price: '11',
			// 	},
			// 	{
			// 		id: '3',
			// 		price: '11',
			// 	},
			// ],
			disabled: true,
			// 待缴费
			payShow: false,
			formData: {
				pageNo: 1,
				pageNumber: 10,
			},
			backtop: false,
			UnpaidFee: [],
			//待检查
			examineShow: false,
			examine: '测试',
			//已完成
			accomplishShow: false,
			accomplish: '',
			// 全部
			allShow: false,
			all: '全部',
			tabList: [
				{ name: '待缴费' },
				{ name: '菜单' },
				{ name: '待检查' },
				{ name: '已完成' },
				{ name: '全部' },
			],
			// 菜单
			listMenu: [],
			// 菜单类型
			typeMenu: '',
			typeMenuId: '',
			typeMenuShow: false,
			typeMenuList: [],
			priceList: [],
			// ----------
			//共用
			dataList: [],
			newData: [],
			current: 0,
			commodity: [],
			// priceNum: 0,
			priceTotalList: [],
			// 分类ID
			examId: '',
			parameterData: [],
		}
	},
	// onShow() {},
	onLoad() {
		this.priceTotalList = []
		this.listMenu = []
		this.getExamTypeDataList(this.orgCode)

		// this.list = []
		// 测试数据调用
		// let arr = []
		// this.list.map(item => {
		// 	arr.push(Object.assign({}, item, { checked: false }))
		// })
		// this.list = arr
		// this.getHisClinicDict(this.orgCode, this.typeMenuId)
		//
		// this.getExamTypeDataList(this.orgCode)
	},
	onReady() {
		// if (Array.isArray(this.UnpaidFee) && this.UnpaidFee.length < 1) {
		// 	this.payShow = false
		// } else {
		// 	this.payShow = true
		// }
		// if (this.examine == '') {
		// 	this.examineShow = false
		// } else {
		// 	this.examineShow = true
		// }
		// if (this.accomplish == '') {
		// 	this.accomplishShow = false
		// } else {
		// 	this.accomplishShow = true
		// }
		// if (this.all == '') {
		// 	this.allShow = false
		// } else {
		// 	this.allShow = true
		// }
	},
	// 页面滚动
	onPageScroll(e) {
		// console.log('滚动距离为：' + e.scrollTop)
		if (e.scrollTop >= 500) {
			this.backtop = true
		} else {
			this.backtop = false
		}
	},
	computed: {
		priceNum() {
			return this.priceTotalList.reduce((total, item) => {
				return (total += Number(item.price))
			}, 0)
		},
		...mapState({
			orgCode: state => state.orgCode,
			orgId: state => state.orgId,
		}),
	},
	mounted() {},
	methods: {
		// 返回
		returnTop() {
			wx.pageScrollTo({
				scrollTop: 0,
				duration: 1000,
			})
		},
		// 菜单
		// getHisClinicDict(orgCode, examTypeId) {
		// 	getHisClinicDict({ orgCode: orgCode, examTypeId: examTypeId }).then(
		// 		({ data, head }) => {
		// 			// this.listMenu = data
		// 			console.log(data)
		// 			data.map(i => {
		// 				this.listMenu.push(i.clinicItemDict)
		// 			})
		// 			console.log(this.listMenu)
		// 			// this.list = data.itemList.slice(0, this.formData.pageNumber)
		// 			// 关闭正在等待的图标
		// 			if (head.code == 200) {
		// 				// wx.hideLoading()
		// 				// wx.stopPullDownRefresh()
		// 			}
		// 		},
		// 	)
		// },
		getExamTypeDataList(orgCode) {
			getExamTypeList({ orgCode: orgCode }).then(({ data, head }) => {
				console.log(1)
				// console.log(data)
				this.typeMenu = ''
				this.typeMenuId = ''
				if (head.code == 200) {
					this.typeMenu = data[0].name
					this.typeMenuId = data[0].id
					this.typeMenuList = data
					this.getHisClinicDictList(this.orgCode, data[0].id)
					// console.log(this.typeMenuList, '123')
				}
			})
		},
		// 菜单
		getHisClinicDictList(orgCode, examTypeId) {
			getHisClinicDict({ orgCode: orgCode, examTypeId: examTypeId }).then(
				({ data, head }) => {
					// this.listMenu = data
					this.listMenu = []
					console.log(data)
					data.map(i => {
						this.listMenu.push(i)
					})
					console.log(this.listMenu, '1221')
					// this.list = data.itemList.slice(0, this.formData.pageNumber)
					// 关闭正在等待的图标
					if (head.code == 200) {
						// wx.hideLoading()
						// wx.stopPullDownRefresh()
					}
				},
			)
		},
		// 测试数据
		// a() {
		// 	let data = [{ name: '测试30' }, { name: '测试31' }]
		// 	this.UnpaidFee = data.slice(0, this.formData.pageNumber)
		// 	this.dataList = data
		// },

		//切换菜单
		// tabChange(index) {
		// 	// 当标签页发生变化重置页码
		// 	// this.formData = {
		// 	// 	pageNo: 1,
		// 	// 	pageNumber: 10,
		// 	// }
		// 	this.dataList = []
		// 	this.current = index
		// 	if (this.current == 0) {
		// 		this.UnpaidFee = []
		// 		// this.a()
		// 	} else if (this.current == 1) {
		// 		this.priceTotalList = []
		// 		this.listMenu = []
		// 		this.getExamTypeDataList(this.orgCode)

		// 		this.list = []
		// 		console.log(this.typeMenuId, '123')
		// 	}
		// },
		// 多选
		checkboxChange(e) {
			console.log(e)
			if (e.value) {
				// console.log(this.priceTotalList,'11111111111111111111111111')
				// let res = this.priceTotalList.find(
				// 	i => i.name === e.name,
				// )
				// console.log(res,'11111111')
				// if (!res) {
				this.priceTotalList.push({
					id: e.name,
					price: this.listMenu.find(k => k.id === e.name).clinicItemDict.price,
					itemName: this.listMenu.find(k => k.id === e.name).clinicItemDict
						.itemName,
					inputCode: this.listMenu.find(k => k.id === e.name).clinicItemDict
						.inputCode,
					prescribeList: this.listMenu.find(k => k.id === e.name),
					prescribeListList: this.listMenu.find(k => k.id === e.name)
						.clinicItemDict,
				})
				// }
			} else {
				let res = this.priceTotalList.findIndex(i => i.id === e.name)
				if (res != -1) {
					this.priceTotalList.splice(res, 1)
				}
			}
			if (this.priceTotalList.length > 0) {
				this.disabled = false
			} else {
				this.disabled = true
			}
			console.log(this.priceTotalLis, '测试')
		},
		checkboxGroupChange(e) {
			this.commodity = e
		},
		// 菜单选择项
		typeMenuConfirm(e) {
			console.log(e)
			this.priceTotalList = []
			this.listMenu = []
			this.typeMenu = e[0].label
			this.typeMenuId = e[0].value
			this.getHisClinicDictList(this.orgCode, e[0].value)
		},
		// 提交
		submit() {
			// orgId;         //医院机构id
			// branchName;    //院区
			// cardNo;        //就诊卡号
			// cardType;      //就诊卡类型
			// visitNo;       //就诊编号
			// registerNo;    //挂号号
			// paySerialNo;   //第三方支付流水号
			// payAccount;    //支付账号
			// orderNo;       //业务订单号
			// payFee;        //支付费用(处方费用)
			// payType;       //支付方式
			// tradeType;     //交易类型
			// merchantNo;    //商户号
			// tradeTime;     //交易时间
			// 检验、检查项
			//  itemCodeList;
			// let parameter = {
			// 	orgId: this.$store.state.orgId,
			// 	branchName: '',
			// 	cardNo: '',
			// 	cardType: '',
			// 	visitNo: '',
			// 	registerNo: '',
			// 	paySerialNo: '',
			// 	payAccount: '',
			// 	orderNo: '',
			// 	payFee: this.priceNum,
			// 	payType: '',
			// 	tradeType: '',
			// 	merchantNo: '',
			// 	tradeTime: '',
			// 	itemCodeList: this.commodity,
			// }
			this.$router.navigateTo({
				url: `/pages/inspect/immediatelyMake?parameter=${JSON.stringify(
					this.priceTotalList,
				)}&price=${this.priceNum}&examId=${this.typeMenuId}`,
			})
			// confirmAppointPrescribe(parameter).then(({ data, head }) => {
			// 	console.log(head)
			// 	if (head.code == 200) {
			// 		this.$refs.uToast.show({
			// 			title: data,
			// 			type: 'success',
			// 			isTab: true,
			// 			url: 'pages/index/index',
			// 		})
			// 	} else {
			// 		this.$refs.uToast.show({
			// 			title: '预约失败',
			// 			type: 'error',
			// 			isTab: true,
			// 		})
			// 		return
			// 	}
			// })
			// console.log(parameter)
		},
	},

	// 下拉刷新
	onPullDownRefresh() {
		this.formData.pageNo = 1
		this.dataList = []
		wx.showNavigationBarLoading()
		// wx.showLoading({
		// 	title: '加载中',
		// 	mask: true,
		// })
		// 判断菜单
		if (this.current == 0) {
			// this.a()
			wx.showToast({
				title: '加载成功',
			})
			// 成功后关闭刷新
			wx.stopPullDownRefresh()
			// 隐藏loading框
			wx.hideLoading()
			wx.hideNavigationBarLoading()
		} else if (this.current == 1) {
			// this.getHisClinicDict(this.orgId, this.typeMenuId)
			// wx.showToast({
			// 	title: '加载成功',
			// })
			// wx.hideNavigationBarLoading()
		}
	},
	// publicMethod() {
	// 	let NumPage = Math.ceil(this.dataList.length / this.formData.pageNumber)
	// 	if (this.formData.pageNo == NumPage) {
	// 		wx.showToast({ title: '暂无更多' })
	// 	} else {
	// 		this.formData.pageNo++
	// 		// 滚动时的条数到第几条结束
	// 		let pageSizeSum = this.formData.pageNo * this.formData.pageNumber
	// 		let pageNoSum = (this.formData.pageNo - 1) * this.formData.pageNumber
	// 		this.newData = this.dataList.slice(pageNoSum, pageSizeSum)
	// 		// this.UnpaidFee.push(...newData)
	// 	}
	// },
	// 上拉加载
	onReachBottom() {
		// 显示加载中 效果
		// wx.showLoading({
		// 	title: '加载中',
		// 	mask: true,
		// })

		let NumPage = Math.ceil(this.dataList.length / this.formData.pageNumber)
		this.formData.pageNo++
		// 滚动时的条数到第几条结束
		let pageSizeSum = this.formData.pageNo * this.formData.pageNumber
		let pageNoSum = (this.formData.pageNo - 1) * this.formData.pageNumber
		this.newData = this.dataList.slice(pageNoSum, pageSizeSum)
		if (this.formData.pageNo == NumPage) {
			wx.showToast({ title: '暂无更多' })
		}

		if (this.current == 0) {
			console.log('测试方法')
			this.UnpaidFee.push(...this.newData)
			// }
		} else if (this.current == 1) {
			// if (this.formData.pageNo == NumPage) {
			// 	wx.showToast({ title: '暂无更多' })
			// } else {
			// 	this.formData.pageNo++
			// 	// 滚动时的条数到第几条结束
			// 	let pageSizeSum = this.formData.pageNo * this.formData.pageNumber
			// 	let pageNoSum = (this.formData.pageNo - 1) * this.formData.pageNumber
			// 	let newData = this.dataList.slice(pageNoSum, pageSizeSum)
			// ---
			// this.list.push(...this.newData)
			// console.log(this.list, '渲染的数据')
			// }
		}
		// console.log('上滑加载')
	},
}
</script>

<style lang="scss">
page {
	// background-color: #f3f4f6;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.title_box {
	border-top: 2rpx solid #cccccc;
	border-bottom: 2rpx solid #cccccc;
	.title_box_content {
		display: flex;
		padding: 30rpx;
		background: #fff;
		view:nth-child(2) {
			flex: 1;
			text-align: center;
			color: #9a9a9a;
		}
		view:nth-child(3) {
			color: #0089ff;
		}
	}
}
.bottom_comtent {
	padding: 0 30rpx;
}
.tabsStyle {
	position: fixed;
	width: 100%;
}
.checkBoxStyle {
	.u-checkbox {
		background: #fff;
		border-bottom: 1px solid #dedede;
		padding: 10px;
		.u-checkbox__label.data-v-54acf820 {
			width: 100%;
		}
	}
}
.submitMenu {
	background: #fff;
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 10px 0;
}
// 返回
.backtop {
	position: fixed;
	display: flex;
	bottom: 200rpx;
	right: 16rpx;
	border-radius: 50%;
	width: 100rpx;
	height: 100rpx;
	background-color: rgba(212, 212, 212, 0.5);
	font-size: 36rpx;
	text-align: center;
	justify-content: center;
	align-items: center;
	z-index: 99999;
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>